<template>
	<view class="home">
		<canvas id="myCanvas" canvas-id="myCanvas"
			style="width: 500rpx; height: 700rpx; position: absolute; opacity: 1;"></canvas>
		<view class="assistant">
			<view class="fixfix">
				<!-- 背景图 -->
				<view class="img_box">
					<image src="https://mg-print.oss-cn-shenzhen.aliyuncs.com/img/manner_bg.png" mode=""></image>
				</view>
				<!-- 展位盒子 -->
				<view class="block_box"></view>
				<!-- 胶囊距离 -->
				<view class="fix">
					<top-status></top-status>
					<view class="logo">
						<uni-icons type="left" size="25" @click="back"></uni-icons>
						<view class="title">商家管理</view>
						<view></view>
					</view>
				</view>
				<view class="container">
					<view class="shop_top">
						<view class="store_name" style="flex: 1;">
							<image src="https://mg-print.oss-cn-shenzhen.aliyuncs.com/img/shop_img.png" mode=""></image>
							<text class="shop_name">{{ shopInfo.ShopName }}</text>
						</view>
						<view>
							<text class="change" style="margin-left: 0;" @click="getCode"
								v-if="shopInfo.QrCodeImg">店铺二维码</text>
							<!-- <text class="change" style="margin-left: 0;" @click="getCode"
								v-if="shopInfo.DaiLiImg">代理二维码</text> -->
							<text class="change" @click="show = true">切换门店</text>
						</view>
					</view>

					<!-- 店铺营收情况 -->
					<businessData :shopInfo="shopInfo"></businessData>
					<!-- 常用工具 -->
					<tools :shopInfo="shopInfo" @addStore='addStore'></tools>
				</view>
			</view>
		</view>
		<u-picker :show="show" :keyName="'ShopName'" :columns="columns" @confirm="confirm" @cancel="closePick">
		</u-picker>
		<u-popup :show="showpoup" mode="center" :safeAreaInsetBottom="false" :round="10" @close="showpoup = false">
			<view class="login-container">
				<view
					style="text-align: center; margin-bottom: 30rpx; font-weight: bold;font-size: 36rpx;color: #333333;">
					绑定代理
				</view>
				<view class="login-box">
					<view class="input-group">
						<text class="label">用户名</text>
						<input class="input" v-model="userName" placeholder="请输入用户名" />
					</view>
					<view class="input-group">
						<text class="label">密码</text>
						<input class="input" v-model="password" type="password" placeholder="请输入密码" />
					</view>
					<view class="button" @click="login">绑定</view>
					<view class="button cancel" @click="showpoup = false">取消</view>
					<view class="button cancel">请向平台索取</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show="showImage" mode="center" :safeAreaInsetBottom="false" :round="10" @close="showImage = false">
			<view class="img_container">
				<image class="img_box1" :src="shopInfo.QrCodeImg || shopInfo.DaiLiImg" mode=""></image>
				<view class="button_group">
					<button @click="savePic">保存图片</button>
					<button @click="drawCanvas" v-if="shopInfo.QrCodeImg">打印图片</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import businessData from '@/components/businessData/businessData.vue'
import tools from '@/components/tools/tools.vue'
export default {
	components: {
		// 店铺信息
		businessData,
		tools
	},
	data() {
		return {
			columns: [],
			show: false,
			shopInfo: {},
			showpoup: '',
			password: '',
			userName: '',
			showImage: false,
			img: '',
			chooseIndex: 0,
			isPayNow:false
		}
	},
	onLoad(e) {
		if (e.isPayNow) {
			this.isPayNow = true
		}
		this.getShopList()
	},
	onShow() {
		this.getShopList()
	},
	methods: {
		savePic() {
			let that = this
			let imgUrl = that.shopInfo.QrCodeImg || that.shopInfo.DaiLiImg
			uni.downloadFile({
				url: imgUrl,
				success: (res) => {
					if (res.statusCode === 200) {
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function () {
								uni.showToast({
									title: "保存成功",
									icon: "none"
								});
							},
							fail: function () {
								uni.showToast({
									title: "保存失败，请稍后重试",
									icon: "none"
								});
							}
						});
					}
				}
			})
		},
		async drawCanvas() {
			let res = await this.$api.post('Action/QrPrint', {
				ShopID: this.shopInfo.ShopID,
				UrlImg: this.shopInfo.QrCodeImg
			})
			uni.showToast({
				title: "命令已发送",
				icon: "none"
			});

			this.showImage = false
			console.log(res);
		},




		closePick() {
			this.show = false
		},
		back() {
			uni.navigateBack()
		},
		async getShopList() {
			uni.showLoading({
				title: '加载中'
			});
			let res = await this.$api.post('MLogin/GetShops')
			if (res?.code == 0) {
				this.columns = [res.data]
				this.shopInfo = res.data[this.chooseIndex]
				this.showpoup = false
				if (this.isPayNow) {
					this.showImage = true
				}
			} else {
				this.$pv.msg(res?.message || '获取店铺列表失败')
			}
			uni.hideLoading();

			console.log(this.shopInfo);
		},
		confirm(e) {
			console.log(e);
			this.shopInfo = e.value[0]
			this.chooseIndex = e.indexs[0]
			this.show = false
		},
		addStore() {
			this.showpoup = true
		},
		async getCode() {
			this.showImage = true
			// let res =await this.$api.post('Action/PrintQRcode',{ShopID:this.shopInfo.ShopID})
			// console.log(res);
		},
		async login() {
			let res = await this.$api.post('MLogin/MerchantLogin', {
				username: this.userName,
				password: this.password
			})
			if (res?.code == 0) {
				this.$pv.msg('绑定成功');
				this.show = false
				this.password = ''
				this.userName = ''
				if (res?.data?.Type == 'Agent' || res?.data?.ShopID != 0) {
					this.getShopList()
				} else {
					this.nav_to('/pages/otherPage/ImproveInformation')
				}
				uni.setStorageSync('guid', res.data.Guid)
			} else {
				this.$pv.msg(res?.message || '绑定失败');
			}

		},
	}
}
</script>
<style>
page {
	background-color: #f3f5f9;
}
</style>


<style lang="scss" scoped>
.button_group {
	display: flex;
	justify-content: space-around;
	align-items: center;
	width: 100%;

	button {
		width: 40%;
		background-color: #3572FE;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 70rpx;
		border-radius: 10rpx;
		color: white;
		font-size: 28rpx
	}
}

.img_container {
	.img_box1 {
		width: 500rpx;
		height: 500rpx;
	}

	padding:20rpx 0;
	width: 600rpx;
	height: 700rpx;
	border-radius: 20rpx;
	background-color: white;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
}

// 登录框容器
.login-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 600rpx;
	height: 700rpx;
	background: #FFFFFF;
	border-radius: 24rpx;
}

// 登录框
.login-box {
	width: 90%;
	max-width: 600rpx;
	border-radius: 10rpx;
	// box-shadow: 0rpx 4rpx 10rpx rgba(0, 0, 0, 0.1);
	display: flex;
	flex-direction: column;
	align-items: center;
}

// 标签
.label {
	width: 100%;
	font-size: 28rpx;
	color: #333;
	margin-bottom: 8rpx;
	text-align: left;
}

// 输入框容器
.input-group {
	width: 100%;
	margin-bottom: 20rpx;
	display: flex;
	flex-direction: column;
}

// 输入框
.input {
	width: 100%;
	height: 60rpx;
	border: 1rpx solid #ddd;
	border-radius: 5rpx;
	font-size: 28rpx;
	color: #333;
}

// 按钮
.button {
	width: 468rpx;
	height: 80rpx;
	background: #3572FE;
	border-radius: 8rpx;
	border: none;
	color: #ffffff;
	font-size: 28rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	margin-top: 20rpx;
}

.cancel {
	background-color: white;
	margin-top: 30rpx;
	font-size: 28rpx;
	color: #999999;
}


.change {

	font-size: 24rpx;
	box-sizing: content-box;
	padding: 10rpx;
	background-color: #3572fe;
	color: #ffffff;
	margin-left: 10rpx;
	border-radius: 20rpx;
}

.shop_top {
	display: flex;
	// align-items: center;
	justify-content: space-between;
	margin-top: 50rpx;
	margin-bottom: 38rpx;
	padding: 0 24rpx;
}

.container {
	position: relative;
	z-index: 99;
}

.store_name {

	display: flex;
	align-items: center;
	box-sizing: border-box;
	width: 50%;

	image {
		width: 56rpx;
		height: 56rpx;
		margin-right: 16rpx;
	}

	.shop_name {
		font-weight: bold;
		font-size: 32rpx;
		color: #333333;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		max-width: calc(100% - 72rpx);
		/* 根据图片宽度和间距调整 */
	}

}

.block_box {
	height: 196rpx;
}

.img_box {
	position: absolute;
	width: 100%;
	height: 500rpx;
	top: 0;

	image {
		width: 100%;
		height: 100%;
	}
}

page {
	background-color: #ffffff;
}


view {
	box-sizing: border-box;
}

.logo {
	box-sizing: border-box;
	height: 44px;
	width: 750rpx;
	align-items: center;
	padding: 0 32rpx;
	display: flex;
	justify-content: space-between;
	position: relative;

	.title {
		font-weight: bold;
		font-size: 36rpx;
		color: #333333;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);

	}

}

.assistant {
	position: relative;
	// height: 100vh;
	// overflow: hidden;
}

.fix {
	position: fixed;
	width: 750rpx;
	top: 0;
	left: 0;
	z-index: 98;
	// background-color: #fff;
}
</style>